<template>
  <div class="search-page">
    <div class="search-cont">
      <p>搜索内容：{{searchStr}}</p>
      <p class="result-num">搜索结果:<span>{{searchList.length}}</span>个</p>
      <div class="search-list">
        <commu-item :artiList="searchList" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CommuItem from '@/components/CommuItem.vue'
import imgs from '@/assets/images/banner-2.jpg'
import avator from '@/assets/images/default-avator.png'
export default {
  components: {
    CommuItem
  },
  data() {
    return {
      imgs,
      avator,
      artiList: [
        {
          id: 1,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，其沿岸分布着安克雷奇、西厄德、瓦尔德兹和科尔多瓦等良港，是美国宣布战时必须要控制的海上航道咽喉的第一个。',
          image: imgs,
          author: '揽山君',
          avator
        },
        {
          id: 2,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，',
          image: imgs,
          author: '揽山君',
          avator
        },
        {
          id: 3,
          title: '阿拉斯加海湾',
          text: '阿拉斯加湾是世界9大著名海湾之一阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，阿拉斯加湾是世界9大著名海湾之一，位于美国阿拉斯加州南端、介于阿拉斯加半岛与亚历山大群岛之间，为北太平洋自然条件较好的海湾之一，',
          author: '揽山君',
          avator
        }
      ]
    }
  },
  methods: {},
  computed: {
    ...mapState(['searchList', 'searchStr'])
  },
  created() {}
}
</script>

<style lang="less" scoped>
.search-page {
  display: flex;
  justify-content: center;
  margin: 30px auto 50px auto;
  width: 1060px;
  .search-cont {
    width: 745px;
    /* 结果数量 */
    .result-num {
      text-align: right;
      padding-right: 20px;
      line-height: 30px;
      font-size: 13px;
      color: #999;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      span {
        color: #33c5c5;
        padding: 0 3px;
      }
    }
  }
}
</style> 